<template>
    <view class="imginfo" :class="`imginfo` + (imageIndex % 4)">
        <image class="frame" :src="'../../static/searchResults/huaxue/frame' + (imageIndex % 4) + '.png'"></image>
        <view class="photo-box" @click="gotoPreview"><image :src="imageInfo.image_url_t" mode="aspectFill"></image></view>
        <CheckItem class="check-item" :selected="imageInfo.isSelected" @selectPhoto="selectPhoto"></CheckItem>
    </view>
</template>
<script>
import CheckItem from './CheckItem.vue';
export default {
    name: 'HuaXue',
    data() {
        return {};
    },
    props: {
        imageInfo: {
            type: Object,
            require: true
        },
        imageIndex: {
            type: Number,
            require: true
        }
    },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        gotoPreview() {
            this.$emit('gotoPreView', this.imageInfo);
        },
        selectPhoto() {
            this.$emit('selectPhoto', this.imageIndex);
        }
    },
    components: { CheckItem }
};
</script>
<style lang="less" scoped="scoped">
.imginfo {
    position: relative;
    width: 660rpx;

    .frame {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .photo-box {
        position: absolute;
        background: #fff;
        border-radius: 8rpx;
        image {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
        }
    }
}

.imginfo0 {
    height: 469rpx;
    .photo-box {
        left: 58rpx;
        top: 42rpx;
        width: 448rpx;
        height: 294rpx;
    }
    .check-item {
        position: absolute;
        right: 100rpx;
        bottom: 90rpx;
    }
}

.imginfo1 {
    height: 397rpx;
    .photo-box {
        left: 224rpx;
        top: 55rpx;
        width: 412rpx;
        height: 268rpx;
    }
    .check-item {
        position: absolute;
        right: 396rpx;
        bottom: 30rpx;
    }
}

.imginfo2 {
    height: 509rpx;
    .photo-box {
        left: 96rpx;
        top: 60rpx;
        width: 498rpx;
        height: 340rpx;
    }
    .check-item {
        position: absolute;
        right: 4rpx;
        bottom: 52rpx;
    }
}
.imginfo3 {
    height: 476rpx;
    .photo-box {
        left: 65rpx;
        top: 44rpx;
        width: 250rpx;
        height: 340rpx;
    }
    .check-item {
        position: absolute;
        right: 550rpx;
        bottom: 50rpx;
    }
}
</style>
